<template>
  <div class="stock-search">
    <h2>股票搜索</h2>
    <div class="search-form">
      <el-input 
        v-model="searchKeyword" 
        @input="handleSearch"
        placeholder="输入股票代码或名称进行搜索"
        style="width: 300px; margin-right: 10px;"
      />
      <el-select v-model="selectedMarket" @change="handleMarketChange" placeholder="请选择市场" style="width: 200px;">
        <el-option label="所有市场" value=""></el-option>
        <el-option label="上海证券交易所" value="SH"></el-option>
        <el-option label="深圳证券交易所" value="SZ"></el-option>
        <el-option label="香港联合交易所" value="HK"></el-option>
      </el-select>
    </div>
    
    <div v-if="loading" class="loading">搜索中...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else>
      <el-table :data="stocks" height="500" style="width: 100%">
        <el-table-column prop="symbol" label="股票代码" min-width="120"></el-table-column>
        <el-table-column prop="name" label="股票名称" min-width="150"></el-table-column>
        <el-table-column prop="market" label="市场" min-width="180">
          <template #default="scope">
            {{ getMarketName(scope.row.market) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120" fixed="right">
          <template #default="scope">
            <el-button @click="selectStock(scope.row)" type="primary" size="small">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import apiService from '../services/ApiService';

const searchKeyword = ref('');
const selectedMarket = ref('');
const stocks = ref([]);
const loading = ref(false);
const error = ref(null);

const emit = defineEmits(['stockSelected']);

onMounted(async () => {
  await loadStocks();
});

const loadStocks = async () => {
  try {
    loading.value = true;
    error.value = null;
    
    let data;
    if (selectedMarket.value) {
      data = await apiService.getStocksByMarket(selectedMarket.value);
    } else {
      data = await apiService.getAllStockInfo();
    }
    
    stocks.value = data;
  } catch (err) {
    error.value = '获取股票数据失败';
    console.error('获取股票数据失败:', err);
  } finally {
    loading.value = false;
  }
};

const handleSearch = async () => {
  if (searchKeyword.value.length === 0) {
    await loadStocks();
    return;
  }
  
  if (searchKeyword.value.length < 2) {
    return; // 至少输入2个字符才搜索
  }
  
  try {
    loading.value = true;
    error.value = null;
    
    const data = await apiService.searchStocks(searchKeyword.value);
    stocks.value = data;
  } catch (err) {
    error.value = '搜索股票失败';
    console.error('搜索股票失败:', err);
  } finally {
    loading.value = false;
  }
};

const handleMarketChange = async () => {
  searchKeyword.value = '';
  await loadStocks();
};

const selectStock = (stock) => {
  emit('stockSelected', stock);
};

const getMarketName = (market) => {
  const marketNames = {
    'SH': '上海证券交易所',
    'SZ': '深圳证券交易所',
    'HK': '香港联合交易所'
  };
  return marketNames[market] || market;
};
</script>

<style scoped>
.stock-search {
  padding: 20px;
}

.loading, .error {
  text-align: center;
  padding: 20px;
}

.error {
  color: red;
}
</style>